<script setup>
import { computed } from "vue";
import "@material/web/icon/icon.js";
import "@material/web/iconbutton/icon-button.js";
import "@material/web/button/text-button.js";

const props = defineProps(["year", "showControl"]);
const emit = defineEmits(["change", "click"]);
const today = new Date();
const year = computed(() => props.year === undefined ? today.getFullYear() : props.year);
</script>

<template>
  <div class="year-picker">
    <div class="button">
      <KeepAlive>
        <Transition name="button">
          <md-icon-button v-if="showControl" @click="$emit('change', -1)">
            <md-icon>navigate_before</md-icon>
          </md-icon-button>
        </Transition>
      </KeepAlive>
    </div>
    <md-text-button @click="$emit('click')" class="label-large">
      <div class="drop-down">
        <span>{{ year }}</span>
        <md-icon>arrow_drop_down</md-icon>
      </div>
    </md-text-button>
    <div class="button">
      <KeepAlive>
        <Transition name="button">
          <md-icon-button v-if="showControl" @click="$emit('change', 1)">
            <md-icon>navigate_next</md-icon>
          </md-icon-button>
        </Transition>
      </KeepAlive>
    </div>
  </div>
</template>

<style scoped>
.year-picker {
  --md-text-button-leading-space: 0px;
  --md-text-button-trailing-space: 0px;
  --md-sys-color-primary: var(--md-sys-color-on-surface-variant);
  --md-icon-button-icon-color: var(--md-sys-color-on-surface-variant);
  --md-text-button-label-text-color: var(--md-sys-color-on-surface-variant);
  display: flex;
  align-items: center;
}

.year-picker .button,
.year-picker md-icon-button {
  height: 48px;
  width: 48px;
}

.drop-down {
  display: flex;
  align-items: center;
}

.drop-down>span {
  margin-left: 4px;
}

.button-enter-active,
.button-leave-active {
  transition-property: opacity;
  transition-duration: var(--md-sys-motion-duration-medium2);
  transition-timing-function: var(--md-sys-motion-easing-standard);
}

.button-enter-to,
.button-leave-from {
  opacity: 1;
}

.button-enter-from,
.button-leave-to {
  opacity: 0;
}
</style>